
// 登录注册页面相关的js代码
// const form = layui.form

console.log(layui);
const { form } = layui
console.log(form);  // is not defined
form.verify({ // 指定规则名和对应的验证规则
  username: [ // 用户名
    /^[a-z0-9]{6,10}$/,
    '账号名是6到10位由数字, 小写字母组成'
  ],
  password: [ // 密码
    /^[\S]{6,10}$/,
    '密码是6到10位, 不能有空格'
  ],
  // 注册页-确认密码
  repwd: function (value) { // 为什么用函数, 因为不光要获取这个规则对应的标签的值, 还需要用jQ获取另外一个标签的值
    // 判断上面的密码的值和当前确认密码框的值是否相等 
    // if($(".pwd").val() !== value){
    //   return '两次密码不相同'
    // }
    return ($(".pwd").val() !== value) && '两次密码不相同'
  },
})


// 注册绑定表单事件  - > 请求接口 ,拿数据
// $('#register .layui-form').on('submit',function (e) {

// })

// 给表单 注册  事件 
// 看文档 - 了解了当前的注册接口的参数,url等情况
// 可以获取到当前输入的内容  - username 和password 的值

$('#register .layui-form').on('submit', (e) => {
  // 阻止表单的默认行为
  e.preventDefault()
  // 通过JQ获取input的值
  let data = {
    username: $('#register input[name=username]').val(),
    password: $('#register input[name=password]').val()
  }

  // 做了什么事
  //  JQ val()  {username:'xx',password:'xxx'} 
  //  username=asaddsa&password=111111
  // for in  = > push => join('&')
  // axios 请求  = > 拿到数据 => 让注册框隐藏
  // {
  //   username:'aaa',
  //   password:'11231'
  // }
  // let username =  $('#register input[name=username]').val()
  // let password =  $('#register input[name=password]').val()
  // 后台要key=value&key=value字符串
  // username=asaddsa&password=111111
  // 后台需要什么数据 - > 将数据转化成后台想要的结构
  // username=asaddsa
  // password=111111
  // ['username=asaddsa','password=111111']
  // join  数组 转字符串  join('&')

  let data2 = handleFormatReg(data)
  // console.log(1);
  // axios 发送请求
  // POST 
  // 接口地址   http://api-breakingnews-web.itheima.net/api/reguser
  // 参数   key=value&key=value字符串
  // .catch(err=>{失败的回调})
  // .then(res=>{成功的回调})
  // axios.post('xxxx',data).then(res=>{}).catch(err=>)
  // axios({url:, data})

  // 调用方法 = >拿到返回值
  // fn()

  postReguser(data2, (res) => {
    console.log('login.js文件拿到的值', res);
  })
  // console.log('login.js文件拿到的值',res);

  // const { status, message } = res.data
  // // 提示 =>不管你是否注册成功，都需要提示用户
  // layer.msg(message);
  // // 让注册框隐藏
  // if (status === 0) {
  //   $('#register').css('display', 'none')
  // }



  // axios.post('http://api-breakingnews-web.itheima.net/api/reguser',data2).then(res=>{
  //   console.log('注册接口返回结果成功了~',res);
  //   // 扩展 - 快速打断点的方法 
  //   // debugger
  //   const {status,message} = res.data
  //   // 提示 =>不管你是否注册成功，都需要提示用户
  //   layer.msg(message);
  //   // 让注册框隐藏
  //   if(status === 0){
  //     $('#register').css('display', 'none')

  //   }
  // })
})

// 做了什么?
// 注册登录事件
// 拿到返回值 -> 判断 ->  如果status === 0 ,正确的执行
// 如何知道status === 0 ? 接口返回正常 = > 看文档 
// 根据业务场景 => 做不同的操作 

// 大事件 3天 = > 
// 看文档的能力  (必须具备) 
// 百度的能力  (必须具备)
// 过程 =>需要时间 
// 接下来vue => 前提 做好铺垫
// 代码的能力 => 阅读文档的能力
// 上午 4节课  + 2节课 不给练习 
// 2节课 => 练习 通过课件,还有视频 => 加班 (1点 2点 完全根据自己的状态) 
// 保证上课的效率 =>最重要


//  做了什么?
// 业务需求 => 需要给用户提示,当前注册登录是否成功
// 来文档里查找 => layui =>弹出层 => 找基本的弹出层

// 给表单注册登录事件
$('#login .layui-form').on('submit', (e) => {
  // 阻止表单的默认行为
  e.preventDefault()
  // 通过JQ获取input的值
  let data = {
    username: $('#login input[name=username]').val(),
    password: $('#login input[name=password]').val()
  }
  // let data2 = []
  // for (const key in data) {
  //   console.log(key,data[key]);
  //   data2.push(`${key}=${data[key]}`)
  // }
  // data2 = data2.join('&')
  let data2 = handleFormatReg(data)
  // let data2  = fn(xxx)
  // console.log(data2);
  // axios 发送请求
  // POST 
  // 接口地址   http://api-breakingnews-web.itheima.net/api/reguser
  // 参数   key=value&key=value字符串
  // .catch(err=>{失败的回调})
  // .then(res=>{成功的回调})
  // axios.post('xxxx',data).then(res=>{}).catch(err=>)
  // axios({url:, data})

  postLogin(data2, (res) => {
    const { status, message } = res.data
    layer.msg(message);
    // 跳转 
    if (status === 0) {
      location.href = '/index.html'
    }
  })
})

// 去注册 - 绑定点击事件
// es6的箭头函数
$('#goto-register').on('click', () => {
  // 注册的盒子显示
  // $('#register').stop().show(200)
  $('#register').css('display', 'block')
})

// 去登录 - 绑定点击事件
$('#goto-login').on('click', e => {
  // 注册的盒子隐藏
  // $('#register').stop().show(200)
  $('#register').css('display', 'none')
})

